<template>
    <layout>
        <div class="wrapper">
            <div class="list">
                <div class="list-item" v-for="item in tableData">
                    <div class="left">
                        <div class="name">
                            <img src="@/assets/images/person.png" alt=""><span >{{item.patientName}}</span>  
                        </div>
                        <div class="project" style="color: red;">
                            <img src="@/assets/images/project.png" alt=""><span>{{item.itemName}}</span>  
                        </div>
                        <div class="institutionName" style="color:green">
                            <img src="@/assets/images/institution.png" alt=""><span>{{item.institutionName}}</span>   
                        </div>
                        <div class="time" style="color: black;">
                            <img src="@/assets/images/time.png" alt=""><span >{{item.reportBeginTime}}</span> 
                        </div>
                    </div>
                    <div class="right">
                        <van-button v-if="item.reportState==20" color="#028002" size="mini" @click="viewReportResult(item.reportId)">查询结果</van-button>
                        <span class="wait" v-else>检测中</span>
                    </div>
                </div>
            </div>
        </div>
            <div class="botton-tip">
				温馨提示：若48小时内，仍无法查找到数据，请联系我们！客服热线：400-1512-686
			</div>
    </layout>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import reportListApi from '@/api/reportList';
export default {
    name: "reportList",
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            code:"",
            beginTime:"",
            endTime:"",
            tableData:[
            ]
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        init(){
            // if(this.$route.query.code){
                this.code = this.$route.query.code
                if(this.$route.query.beginTime) this.beginTime = this.$route.query.beginTime
                if(this.$route.query.endTime) this.endTime = this.$route.query.endTime
                this.getReportList()
            // }
        },
        getReportList(){
            let params = {
                code:this.code||false,
                beginTime:this.beginTime,
                endTime:this.endTime,
            }
            reportListApi.listReport(params)
                .then(res=>{
                    if(res.status==0){
                        if(res.data){
                            this.tableData = res.data
                        }else{
                            this.$dialog.alert({
                                title:"提示",
                                message:"暂无采样记录，请确认查询条件是否正确"
                            })
                        }
                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:res.msg
                        })
                    }
                })
                .catch(err=>{
                    this.$dialog.alert({
                        title:"错误",
                        message:err
                    })
                })
        },
        viewReportResult(id) {
            let params = {
                id:id,
            }
            let toast = this.$toast({
                type:"loading",
                message:"正在打开，请稍后",
                duration:0,
                overlay:true,
            })
            reportListApi.getReportImageUrl(params)
                .then(res=>{
                    toast.close()
                    // 记住为兼容苹果，一定要如下打开链接
                    let wo = window.open(res.data,"_blank");
                    if (wo == null) {
                        window.location.href = res.data;
                    }
                })
                .catch(err=>{
                    toast.close()
                    this.$dialog.alert({
                        title:"错误",
                        message:err
                    })
                })
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init()
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.wrapper{
    font-size: 15px;
    margin:auto;
    // padding: 5px;
    width: 93%;
    .list{
        
        .list-item{
            margin: 10px auto;
            padding: 10px;
            background: white;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,10%);
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 23px;
            .left{
                width: 78%;
                img{
                    width: 16px;
                    vertical-align: -2px;
                    margin-right: 10px;
                }
                .name{
                    font-size: 17px;
                    font-weight: 600;
                }
            }
            .right{
                .wait{
                    color: red;
                }
            }
            
        }
    }
}
.botton-tip{
    width: 93%;
    margin: auto;
    margin-top: 12px;
    font-size: 12px;
    color: red;
    line-height: 24px;
    text-indent: 24px;
}
</style>
